<template>
    <div>
        <div class="flex-container flex-contain1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>

        <div class="flex-container flex-contain2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        
    </div>
</template>

<script setup>
import {reactive} from 'vue'
const vData = reactive({
    name:'layout'
})
</script>

<style lang="scss" scoped>
.flex-container{
    width:800px; height: 800px;
    background:gray;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin:10px;

    div{
        width:200px; height: 200px;
        border:1px solid black;
        background-color: yellowgreen;
        flex-shrink: 0;
    }
    &>div:first-child{
        align-self: flex-start;
    }
}
.flex-contain1{
    align-items:center;
}
.flex-contain2{
    align-content: center;
}

</style>